<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人清单</title>
    <script src="cdn/vue-3.2.26.js"></script>
    <script src="cdn/element-ui.js"></script>
    <link rel="stylesheet" href="cdn/element-plus.css">
    <script src="cdn/element-icon.js"></script>
    <script src="./cdn/axios-0.24.0.js"></script>
    <script src="js/request.js"></script>
    <script src="js/objectToFormData.js"></script>
</head>
<body>
    <div id="app">
        <div class="list-container">
            <div>
                <h2 style="display: inline">Vue Todolist</h2>
                <h3 style="display: inline;margin-left: 15px">用户名:{{ UserName }}</h3>
                <el-button style="float: right" @click="logOut">退出登录</el-button>
            </div>
            <div class="search-container">
                        <el-input v-model="Title"
                        placeholder="请输入想要查找的清单标题"
                                  :prefix-icon="Search" style="width: 60%"></el-input>
                        <el-button type="primary"
                           :icon="Search"
                           id="search-btn"
                        @click="getListData(Title)"></el-button>
            </div>
          <el-table :data="listData"
                    style="width: 100%">
            <el-table-column prop="AutoID"
                             label="序号"
                             width="180"></el-table-column>
            <el-table-column
                             label="标题"
                             width="180">
                <template #default="scope">
                    <el-input v-if="scope.row.Edit" v-model="scope.row.Title">
                    </el-input>
                    <span v-else :class="{textSpan:scope.row.Status === 1}">{{ scope.row.Title }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="Status"
                             label="状态"
                             :show-overflow-tooltip="true"
            :formatter="formatter.Status"></el-table-column>
            <el-table-column prop="CreateTime"
                             label="创建时间" ></el-table-column>
            <el-table-column fixed="right"
                             label="操作">
              <template #default="scope">
                <el-tooltip class="box-item"
                            effect="dark"
                            content="完成">
                  <el-button size="small"
                             type="success"
                             :icon="Check"
                             v-show="scope.row.Status === 0"
                             @click="handleComplete(scope.row)"></el-button>
                </el-tooltip>
                  <el-tooltip class="box-item"
                            effect="dark"
                            content="撤销">
                  <el-button size="small"
                             type="primary"
                             :icon="RefreshRight"
                             v-show="scope.row.Status === 1"
                             @click="handleUndo(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="box-item"
                            effect="dark"
                            content="编辑">
                  <el-button size="small"
                             type="primary"
                             :icon="Edit"
                             v-show="scope.row.Status === 0"
                             @click="handleEdit(scope.row)"></el-button>
                </el-tooltip>
                <el-popconfirm title="确定删除吗？"
                               @confirm="handleDelete(scope.row)">
                  <template #reference>
                    <el-button type="danger"
                               size="small"
                               v-show="scope.row.Status === 0"
                               :icon="Delete"></el-button>

                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
            <div class="add-container">
                    <el-form ref="addListFormRef" :model="addListForm" :rules="addListFormRules">
                        <el-form-item prop="Title">
                        <el-input v-model="addListForm.Title"
                        placeholder="请输入要添加的内容" style="width: 60%">
                        </el-input>
                            <el-button type="success"
                                   :icon="CirclePlus"
                                   id="search-btn"
                            @click="saveListData">添加内容</el-button>
                        </el-form-item>
                    </el-form>
            </div>
            <div class="tag">
                <el-tag type="info">All({{listData.length}})</el-tag>
                <el-tag class="ml-2" type="success">Done({{DoneNumber}})</el-tag>
                <el-tag class="ml-2" type="warning">Active({{listData.length-DoneNumber}})</el-tag>
            </div>
      </div>
    </div>
</body>
<script>
    const { reactive, ref, toRefs, onMounted, watch } = Vue
    const { ElMessage } = ElementPlus
    const { Search, Edit, Delete, CirclePlus, Check, RefreshRight } = ElementPlusIconsVue
    const App = {
            setup () {
                const state = reactive({
                  listData: [],
                  DoneNumber: 0,
                  addListForm: {
                    Title: ""
                  },
                    addListFormRules: {
                        Title: [
                            { required: true, message: '请输入内容', trigger: 'blur' }
                        ]
                    },
                  Title: "",
                  UserName: ""
                })
                onMounted(() => {
                    state.UserName = window.localStorage.getItem("UserName")
                    if (state.UserName){
                        getListData()
                    }else{
                        alert("请先登录")
                        window.location.href = "login.html"
                    }
                })
                const addListFormRef = ref()
                const formatter = {
                    Status(row){
                        const StatusMap = {
                            0: "未完成",
                            1: "已完成"
                        }
                        return StatusMap[row.Status]
                    }
                }
        
        // 添加数据
        const saveListData = () => {
          addListFormRef.value.validate(valid => {
              if (valid){
                  const params = {
                    UserID: localStorage.getItem("UserID"),
                    Title: state.addListForm.Title
                  }
          request({
              url: "/add_list",
              method: "POST",
              data: objectToFormData(params)
          })
            .then(res => {
              if (res.status == 200){
                  const { data } = res
                  if (data.code === "2000"){
                      ElMessage.success("添加成功")
                      getListData()
                  }else{
                      ElMessage.error("添加失败")
                  }
              }
              state.addListForm.Title = ""
            })
              }
          })
        }
        
        // 获取列表数据
        const getListData = (Title) => {
          const params = {
            UserID: window.localStorage.getItem("UserID")
          }
          if (Title){
              params.Title = Title
          }
          request({
              url: "/fuzzy_query",
              method: "GET",
              params: params
          })
            .then(res => {
                if(res.status == 200){
                    state.DoneNumber = 0
                    let { data } = res
                    if(data.code === "2000"){
                        state.listData = data.data.map(item => {
                            if (item.Status === 1){
                                state.DoneNumber++
                            }
                            return {
                                AutoID: item.AutoID,
                                Title: item.Title,
                                CreateTime: item.CreateTime,
                                Status: item.Status,
                                Edit: false
                            }
                        })
                    }
                }
            })
        }
        
        // 修改列表数据
        const handleEdit = (row) => {
            row.Edit = !row.Edit
            const AutoID = row.AutoID
            if(!row.Edit){
                const params = {
                    Title: row.Title
                }
                request({
              url: "/todolist/"+AutoID,
              method: "PUT",
              data: objectToFormData(params)
          })
            .then(res => {
              if(res.status == 200){
                  const { data } = res
                  if(data.code === "2000"){
                      ElMessage.success("修改成功")
                      getListData()
                  }else {
                      ElMessage.error(data.data.error)
                  }
              }
            })
            }
        }
        
        // 删除列表数据
        const handleDelete = (row) => {
          const AutoID = row.AutoID
            const params = {
              IsDelete: 1
            }
          request({
              url: "/todolist/"+AutoID,
              method: "PUT",
              data: objectToFormData(params)
          })
            .then(res => {
              if (res.status == 200){
                  const {data} = res
                  if (data.code === "2000"){
                      ElMessage.success("删除成功")
                      getListData()
                  }else{
                      ElMessage.error(data.data.error)
                  }
              }
            })
        }
        
        // 清单任务完成
        const handleComplete = (row) => {
          const AutoID = row.AutoID
          const params = {
            Status: 1
          }
          request({
              url: "/todolist/"+AutoID,
              method: "PUT",
              data: objectToFormData(params)
          })
            .then(res => {
              if(res.status == 200){
                  const { data } = res
                  if(data.code === "2000"){
                      ElMessage.success("清单已经成功")
                      getListData()
                  }else {
                      ElMessage.error(data.data.error)
                  }
              }
            })
        }
        
        // 撤销重做
        const handleUndo = (row) => {
              const AutoID = row.AutoID
              const params = {
                Status: 0
              }
              request({
                  url: "/todolist/"+AutoID,
                  method: "PUT",
                  data: objectToFormData(params)
              })
                .then(res => {
                  if(res.status == 200){
                      const { data } = res
                      if(data.code === "2000"){
                          ElMessage.success("清单撤销成功")
                          getListData()
                      }else {
                          ElMessage.error(data.data.error)
                      }
                  }
                })
        }
        // 退出登录
        const logOut = () => {
            window.localStorage.removeItem("UserName")
            window.localStorage.removeItem("UserID")
            window.localStorage.removeItem("Account")
            window.location.href = "login.html"
        }
        watch(() => state.Title,(newValue,oldValue) => {
            getListData(newValue)
        })
        return {
          ...toRefs(state),
          Search,
          Edit,
          Delete,
          CirclePlus,
          Check,
          RefreshRight,
          handleEdit,
          handleDelete,
          saveListData,
          handleComplete,
          getListData,
          formatter,
          addListFormRef,
          handleUndo,
          logOut
        }
      }
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app")
</script>
<style>
    .list-container {
        width: 1000px;
        margin: 0 auto;
        margin-top: 100px;
    }
    .search-container {
        width: 100%;
        margin-bottom: 25px;
        margin-top: 25px;
    }
    #search-btn {
      margin-left: 30px;
    }
    .add-container{
        margin-top: 30px;
    }
    .ml-2{
        margin-left: 5px;
    }
    .textSpan{
        text-decoration: line-through;
    }
</style>
</html>